import type { App, ObjectDirective, DirectiveBinding } from 'vue';
/**
 * 鼠标进入svg背景色
 * */

interface SvgHoverOptions {
  hoverColor?: string; // 鼠标进入颜色
  duration?: number; // 过渡时长（秒）
  colorProp?: 'fill' | 'stroke'; // 手动指定颜色属性
  defaultColor?: string; // 未检测到颜色时的默认恢复色
}

const DEFAULT_OPTIONS: SvgHoverOptions = {
  hoverColor: '#7a7a7a',
  duration: 0.3,
  defaultColor: 'black', // SVG 未设置颜色时的默认色（浏览器通常为黑色）
};

// 注入全局过渡样式
const injectGlobalStyles = () => {
  if (document.getElementById('v-svg-hover-styles')) return;

  const style = document.createElement('style');
  style.id = 'v-svg-hover-styles';
  style.textContent = `
    .v-svg-hover {
      transition: fill 0.3s ease, stroke 0.3s ease !important;
    }
    .v-svg-hover.hover-active {
      fill: var(--hover-color) !important;
      stroke: var(--hover-color) !important;
    }
  `;
  document.head.appendChild(style);
};

// 核心：识别颜色属性（支持默认色场景）
const getColorPropAndValue = (el: SVGElement, options: SvgHoverOptions) => {
  // 1. 优先使用用户指定的颜色属性
  if (options.colorProp) {
    const prop = options.colorProp;
    const value = el.style[prop] || getComputedStyle(el)[prop];
    // 若未检测到值，使用默认恢复色
    return { prop, value: value || options.defaultColor! };
  }

  // 2. 自动检测 fill 属性
  const fillValue = el.style.fill || getComputedStyle(el).fill;
  if (fillValue && fillValue !== 'none') {
    return { prop: 'fill', value: fillValue };
  }

  // 3. 自动检测 stroke 属性
  const strokeValue = el.style.stroke || getComputedStyle(el).stroke;
  if (strokeValue && strokeValue !== 'none') {
    return { prop: 'stroke', value: strokeValue };
  }

  // 4. 未检测到任何颜色属性（使用默认配置）
  return {
    prop: 'fill', // SVG 默认识别 fill
    value: options.defaultColor!,
  };
};

const directive: ObjectDirective<SVGElement, SvgHoverOptions> = {
  //@ts-ignore
  bind(el: SVGElement) {
    injectGlobalStyles();
  },

  mounted(el: any, binding: DirectiveBinding<SvgHoverOptions>) {
    const options = { ...DEFAULT_OPTIONS, ...binding.value };
    // 获取颜色属性和原始值（支持默认色）
    const { prop: colorProp, value: originalValue } = getColorPropAndValue(el, options);

    // 初始化样式
    el.classList.add('v-svg-hover');
    el.style.transitionDuration = `${options.duration}s`;
    el.style.setProperty('--hover-color', options.hoverColor!);

    // 鼠标进入：应用 hover 颜色
    const handleMouseEnter = () => {
      // 针对默认色场景：若原始值为默认色，先显式设置（避免浏览器默认行为冲突）
      if (originalValue === options.defaultColor) {
        el.style[colorProp] = originalValue;
      }
      el.style[colorProp] = options.hoverColor!;
      el.classList.add('hover-active');
    };

    // 鼠标离开：恢复原始颜色（包括默认色）
    const handleMouseLeave = () => {
      el.style[colorProp] = originalValue;
      el.classList.remove('hover-active');
    };

    // 绑定事件（使用捕获模式确保触发）
    el.addEventListener('mouseenter', handleMouseEnter, true);
    el.addEventListener('mouseleave', handleMouseLeave, true);

    // 存储数据
    (el as any).vSvgHoverData = {
      colorProp,
      originalValue,
      options,
      handlers: { handleMouseEnter, handleMouseLeave },
    };
  },

  updated(el: SVGElement, binding: DirectiveBinding<SvgHoverOptions>) {
    if (!binding.value) return;

    const data = (el as any).vSvgHoverData;
    if (!data) return;

    data.options = { ...data.options, ...binding.value };
    el.style.transitionDuration = `${data.options.duration}s`;
    el.style.setProperty('--hover-color', data.options.hoverColor!);
  },

  unmounted(el: SVGElement) {
    const data = (el as any).vSvgHoverData;
    if (data) {
      el.removeEventListener('mouseenter', data.handlers.handleMouseEnter, true);
      el.removeEventListener('mouseleave', data.handlers.handleMouseLeave, true);
      el.style[data.colorProp] = data.originalValue;
      el.classList.remove('v-svg-hover', 'hover-active');
      el.style.removeProperty('--hover-color');
      delete (el as any).vSvgHoverData;
    }
  },
};

export const setupSvgHoverDirective = (app: App) => {
  app.directive('svg-hover', directive);
};

export default directive;
